Getting Started on Mobile

The ChartIQ mobile SDK provides a native interface for iOS and Android developers to create and interact with a ChartIQ chart. To use the mobile SDK, you need a copy of the charting library.

For information on building hybrid mobile applications using ChartIQ, including the use of complete HTML templates instead of the native SDKs, see the WebViews and HTML5 Containers tutorial.

Important

Although the mobile SDK for Android and the JavaScript library may use the same function call names at times, they are not the same, and they are not interchangeable.

When using the mobile SDK, follow the documentation in the Android and iOS mobile native APIs.
When directly calling the JavaScript API, follow the documentation in the JavaScript CIQ core library.

Requirements

The mobile SDK will not work on all versions of the JavaScript library. Is it imperative that you use the proper version as required by the SDK:

Helper files and templates

The following files are included in the library package to help you get started:

mobile/js/nativeSdkBridge.js — Encapsulates simple functions to our library so any non-native JavaScript language can easily use it, without cluttering your code with string-based queries.
mobile/js/nativeSdkAccessibility.js — Provides an add-on for nativeSdkBridge.js that helps hook into the voice accessibility mode in both Android and iOS and allows for custom announcements of quotes.
mobile/sample-template-native-sdk.html — Provides a simple HTML application that can be put into a mobile WebView to interface with our JavaScript bridge library, nativeSdkBridge.js. Includes a custom quote feed that can be used by a non-native JavaScript interface.

The following are included in the library package to enable a webpack build to be used:

webpack-example/webpack.config.mobile — A webpack config that will build a transpiled version of the mobile project. If you are loading files locally, you will want to use this build, as ES6 module imports will be blocked by CORS policy.
webpack-example/src/sample-template-native-sdk-webpack.js — A webpack entry point for the mobile project. It contains all the necessary module imports, JavaScript, and tree shaking configuration. To learn more about tree shaking, please see the "Architecture" section of the 7.5.0 to 8.0.0 upgrade notes.
mobile/partials/sample-template-native-sdk-context.html — The HTML partial that webpack uses to generate the application. Modify this file if you want to change any DOM element on the chart.
mobile/css/ciq-mobile.css — All the stylesheet entries that the mobile project uses. Modify this file if you want to overwrite any current class values on the chart and its components.

Mobile-specific library settings

Crosshairs offset

By default, the crosshairs location is slightly offset so the user can see where the crosshairs are located (instead of rendering the crosshairs right under the user's finger). This is especially important on small devices where the user's finger covers a large area.

You can adjust the crosshairs offsets by modifying the following properties:

Device identification

The following flags are available to identify devices:

Performance settings

If a device has poor canvas performance, the backing store can be configured to be turned off while a user is panning or zooming the chart. Refer to CIQ.ChartEngine#disableBackingStoreDuringTouch.

Understanding and extending the SDK bridge

The mobile SDK is essentially a native layer on top of the core JavaScript library, enabling mobile developers to interact with native methods without needing to use JavaScript.

The mobile folder in the package contains sample-template-native-sdk.html, a template to be used with the iOS and Android GitHub sample projects.

A WebView is then used to load this simple template into the mobile app, allowing the native SDK to interact with the chart canvas through the ChartIQ JavaScript bridge library, nativeSdkBridge.js (in the mobile/js folder).

The nativeSdkBridge.js file contains a large number of wrapper functions that adapt functions from the core library for use by the native SDK. For example, here's the mobile SDK wrapper for the CIQ.ChartEngine#addSeries function:

function addSeries(symbol, hexColor, isComparison) {
    var parameters = {
        color: hexColor,
        isComparison: isComparison
    };
    // Call the core API function.
    stxx.addSeries(symbol, parameters);
}

You can similarly extend nativeSdkBridge.js with your own wrapper functions of the core library API to provide capabilities not already in the bridge.

More on this can be found in the Android and iOS tutorials.

Loading an instrument from a query string

If your mobile app will be need to load a particular instrument by default, refer to the useQueryString function for instructions on how to use a URL to send the symbol into the mobile WebView.

Next steps

See the following: